import React, { Component } from 'react'
import UserInfo from './UserInfo'
import {userAction} from '../../actions';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import { userService } from '../../service'
import  MakeUser  from './MakeUser'

class UserList extends Component {

    constructor (props) {
        super(props)
        this.toAdd = this.toAdd.bind(this);
    }

    componentDidMount() {
        console.log(this.props);
        console.log("---------------------------------");
        const {selUser} = this.props.actions;
        //渲染后加载service查询方法
        userService.selUserAll(null,selUser);
    }

    render() {
        console.log("囧");
        const {userList} = this.props.userData;
        const users = userList.map((user)=>{
            return (<UserInfo actions = {this.props.actions} user = {user} />);
        });

        console.log(MakeUser)
        return (
            <div>
                <button onClick={this.toAdd}>添加</button>
                <table>
                    {users}
                </table>
                    <MakeUser/>
            </div>
        )
    }

    toAdd(){
        console.log(this);
    }

}

//连接state到props
const mapStateToProps = state => {
    console.log("hhhhhhhhhhhhhhhhhhhhhh");
    console.log(state);
    return{
        userData: state.userReducer
    }
}

const mapDispatchToProps = (dispatch) =>{
    console.log(userAction);
    return{
        actions:bindActionCreators(userAction,dispatch),
        dispatch:dispatch
    }
}


export default connect(
    mapStateToProps,mapDispatchToProps
)(UserList);